<template>
<div class="tasks">
  <v-nav :path="path" :title="title"></v-nav>
  <div style="height:50px"></div>
  <div type="tab" class-name="tasks-tabs">
    <!-- <v-tab name="all-tasks" title="所有任务" status="active" -->
    <!-- distance="55" v-pull-to-refresh="refreshAll"> -->
      <!-- <v-layer></v-layer> -->
  <div class="content">
  <div class="list-block">
    <ul>   
      <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-calendar"></i></div>
          <div class="item-inner">
            <div class="item-title label" style="color:#333;">开始时间</div>
            <div class="item-input">
              <input type="text"  id='startTime' placeholder="Birth day" >
            </div>
          </div>
        </div>
      </li>
	  
	   <li>
        <div class="item-content">
          <div class="item-media"><i class="icon icon-form-calendar"></i></div>
          <div class="item-inner">
            <div class="item-title label" style="color:#333;">结束时间</div>
            <div class="item-input">
              <input type="text" id='endTIme1' placeholder="Birth day11" >
            </div>
          </div>
        </div>
      </li>
      
    </ul>
  </div>
  <div class="content-block" >
    <div class="row" style="margin-top:0px;">
       <!-- <div class="col-50"><a href="#" class="button button-big button-fill button-danger">取消</a></div> -->
      <div class="col-100" style="margin:0px;"><a href="#" class="button button-big button-fill button-success" @click = "query()">查询</a></div>
    </div>
  </div>

 <div class="list-block">

       <div id = "list" v-for="order in yejilist" >
        <div class="card">
          
            <div class="card-content">
                <div class="card-content-inner">
                  
                    <ul>
                        <li>充值用户: {{order.user_id}}</li>
                        <li>充值金额: {{order.fee}}</li>
                        <li>提交比例: {{order.rate}} %</li>
                        <li>提成金额: {{order.money}}</li>
                        <li>业绩来源: {{order.name}}</li>
                        <li>充值时间: {{order.crate_time}}</li>
                    </ul>
                    
                </div>
            </div>
        </div>
       </div>
 </div>
</template>

<script>
import $ from 'zepto'
import VNav from '../../components/Nav'
import _global from '../global'

export default {
  route: {
    data ({from, next}) {
      if (from.path === '/user') {
        this.path = from.path
      }
    }
  },
  ready () {

    $.init()
    let time = new Date().Format("yyyy-MM-dd");

     $("#startTime").val(time);
     $("#endTIme1").val(time);

    $("#startTime").calendar({
  
      inputReadOnly:true

     });

      $("#endTIme1").calendar({
     
      inputReadOnly:true
     });
    if (window.localStorage.getItem('user_id')) {
      self.userId = parseInt(window.localStorage.getItem('user_id'), 0)
    }
   
  },
  data () {
    return {
      path: '/home',
      title: '业绩查询',
      id: 0,
      yejilist: [],
      predisabled: '',
      active: 'active',
      nextdisabled: '',
      userId: 0
    }
  },
  computed: {
    length () {
      return this.tasks.length
    }
  },
  methods: {

    query(){
      let slef = this
      var startTime = $('#startTime').val();
      var endTime = $('#endTIme1').val();
      this.id = parseInt(window.localStorage.getItem('id'), 0)
       this.$http.get(_global.url + '/getAgentBalance?agentId=' + this.id + '&id=' + this.id + '&startTime=' + startTime+ '&endTime=' +endTime).then(function(res) {
        if (typeof res.data === 'string') {
          res.data = JSON.parse(res.data)
        }
        if (res.data.errcode === -999) {
          // this.$router.go('/')
          window.location.href = _global.url + '/wxlogin'
          return
        }
        if(res.data.errcode === 2){
          $.alert('暂无数据');
          return;
        }
        slef.yejilist = res.data.data
        
      
      }, function(res) {
        console.log(res)
      })
    
    },
   
    classActive (index) {
      if (index === this.p_id) {
        return 'active'
      }
      return ''
    }
  },
  create () {
    this.getPlayerPageList()
  },
  components: {
    VNav
  }
}
</script>

<style>
.tasks {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.tasks-tabs .buttons-tab {
  z-index: 10;
  margin-top:2.2rem;
}
#all-profile, #my-tasks {
  top: 2rem;
}
.all-profile .logo {
  background-color: #A79C8D;
  border-radius: 10px;
  width: 95%;
  margin: auto;
  height: 80px;
  padding: 20.2666654px 21.333332px 5.333333px;
  box-shadow: 0 .0rem .8rem rgba(0,0,0,.3);
  margin-bottom: 0.2rem;
  position: relative;
}
.all-profile .logo .logo_img {
  margin-top: -16px;
  width: 58.666663px;
  height: 58.666663px;
  display: inline-block;
}
.all-profile .logo .logo_txt {
  margin-top: 7px;
  float: right;
  text-align: right;
}
.all-profile .logo .logo_txt .yue {
  color: #ffffff;
  font-size: 15.999999px;
}
.all-profile .logo .logo_txt .amount {
  display: block;
  margin-top: -6px;
  color: #ffffff;
  font-size: 45.8666638px;
}
.all-profile .logo .logo_id{
  color:white;
  width:5rem;
  position:absolute;
  display:block;
  top:0.2rem;
  left:6rem;
  font-size:15.999999px;
}
.all-profile .logo .logo_leixing{
  color:white;
  width:5rem;
  position:absolute;
  display:block;
  top:1rem;
  left:6rem;
  font-size:15.999999px;
}
.all-profile .logo .logo_faka{
  color:white;
  width:8rem;
  position:absolute;
  display:block;
  top:2rem;
  left:6rem;
  font-size:15.999999px;
}
</style>
